<template>
  <view class="home-content">
    <!-- <u-navbar :is-back="false" title="计算器"></u-navbar> -->
    <view>
      <view>{{ calculatorData.time }}</view>
      <view>{{ calculatorData.money }}</view>
      <view>{{ calculatorData.remark }}</view>
    </view>
    <view class="plus-c" @click="insertBill">
      <text class="icon iconfont icon-daikuanjisuanqi" />
    </view>
    <Calculator  @cancel="cancelBtn" @finish="finishBtn" />
    <!-- <u-tabbar :list="list" inactive-color="#7A7E83" active-color="#5499FC"></u-tabbar> -->
  </view>
</template>
<script>
import list from '../../composables/list'
import Calculator from '../../components/Calculator.vue'

export default {
  components: {
    Calculator,
  },
  data() {
    return {
      list: list,
      showCalculator: false,
      calculatorData: {
        time: '',
        money: '',
        remark: '',
      },
    }
  },
  onShow() {},
  methods: {
    insertBill() {
      this.showCalculator = true
    },
    cancelBtn() {
      this.showCalculator = false
    },
    finishBtn(data) {
      this.calculatorData.money = data.money
      this.calculatorData.remark = data.remark
      this.calculatorData.time = data.time.year + '-' + data.time.month + '-' + data.time.day
      this.showCalculator = false
    },
  },
}
</script>

<style scoped lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
.home-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fdfdfd;
}

//plus icon
.plus-c {
  position: fixed;
  right: 50rpx;
  bottom: 150rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  background-color: #ffffff;
  box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
